<template>
  <el-container class="about-layout" style="background: #f5f5f5;">
    <el-header style="text-align: right; font-size: 12px;">
      <el-button type="info" @click.native="showDialog()" icon="el-icon-plus">命名空间</el-button>
    </el-header>
    <el-main>
      <el-col :span="8" v-for="(item,index) in list" :key="index" >
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <span style="font-size:30px;">{{item.name}}</span>
            <div class="bottom clearfix" style="text-align:right;">
              <el-button type="text" class="button" @click="onEditClick(item)" icon="el-icon-setting">配置</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-main>
    <el-dialog title="命名空间" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目" :label-width="formLabelWidth">
            <el-select v-model="form.project" placeholder="请选择项目">
              <el-option
                v-for="(project,index) in projects"
                :key="index"
                :label="project.name"
                :value="project.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSaveMetadata">确 定</el-button>
        </div>
      </el-dialog>
  </el-container>
</template>
<style scoped>
  .about-layout > .el-header{
    background-color: #FFFFFF;
  }
  .el-main > .el-row{
    margin: 10px 0;
  }
  .json-editor{
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll{
  min-height: 300px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #F08047;
}
</style>
<script>
  export default {
    created(){
      this.init()
    },
    methods: {
      init(){
        this.$store.dispatch('namespace/all').then((response)=>{
          this.list = response
          console.log(response)
        }).catch((error)=>{
          console.log(error)
        })
      },
      onEditClick(item){
        console.log(item)
        this.$router.push({name:'namespace_edit', params:item})
      },
      onCodeChange(newCode) {
        this.form.context = newCode
      },
      onSaveMetadata(){
          this.$store.dispatch('namespace/save', this.form).then(() => {
            this.init()
          }).catch((error) => {
            console.log(error)
          })
        this.dialogFormVisible = false;
      },
    },
    data(){
      return {
        list: [{
          id: 1,
          name: 'user-service'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          project:{}
        },
        formLabelWidth: '120px',
        showDialog(){
          this.dialogFormVisible = true;
        },
        projects:[
          {
            id: 1,
            name: 'user-service'
          },
          {
            id: 2,
            name: 'user-adapter'
          }
        ]
      };
    }
  }
</script>